<template>
    <div>
        <MovementComponent/>
        <!-- <moveContainer/> -->
        <section class="p-test">
            <moveContainer
                v-if="isShow"
                ref="$circle"
                class="progress"
                :isAnimation="true"
                :isRound="true"
                :width="width"
                :radius="radius"
                :progress="progress"
                :barColor="barColor"
                :duration="duration"
                :delay="delay"
                :timeFunction="timeFunction"
                :backgroundColor="backgroundColor"
                :text1="text1"
                :text2="text2"
                :text3="text3"
                :text4="text4"
                :text5="text5"
                :text6="text6"
                :text7="text7"
                :text8="text8"
                >
            </moveContainer>
            <!-- <ul>
            <li>
                <label for="width">圆宽（px）:</label>
                <input v-model="width" id="width" type="number" placeholder="例如：140"></li>
            <li>
                <label for="radius">进度条宽度（px）:</label>
                <input v-model="radius" id="radius" type="number" placeholder="例如：12"></li>
            <li>
                <label for="progress">进度百分比:</label>
                <input v-model="progress" id="progress" type="text" placeholder="例如：70"></li>
            <li>
                <label for="barColor">进度条颜色:</label>
                <input v-model="barColor" id="barColor" type="text" placeholder="例如：#f5a623"></li>
            <li>
                <label for="backgroundColor">背景颜色:</label>
                <input v-model="backgroundColor" id="backgroundColor" type="text" placeholder="例如：#FFE8CC">
            </li>
            <li>
                <label for="duration">动画时长（ms）:</label>
                <input v-model="duration" id="duration" type="number" placeholder="例如：1000">
            </li>
            <li>
                <label for="delay">延迟执行（ms）:</label>
                <input v-model="delay" id="delay" type="number" placeholder="例如：20">
            </li>
            <li>
                <label for="timeFunction">缓动算法:</label>
                <input v-model="timeFunction" id="timeFunction" type="text" placeholder="例如：cubic-bezier(0.99, 0.01, 0.22, 0.94)">
            </li>
            <li>
                <div class="btn" @click="reset">重置动画</div>
            </li>
            </ul> -->
        </section>
        <div class="recommend">
            <Title :title="title"/>
            <RecomendItem/>
        </div>

    </div>
</template>
<script>
import MovementComponent from "@/components/Shouye/MovementComponent/movementComponent"
import moveContainer from "@/components/Shouye/MovementComponent/moveContainer"
import Title from "@/components/Shouye/MovementComponent/Title"
import RecomendItem from "@/components/Shouye/MovementComponent/RecomendItem"
export default {
    name:'Movement',
    components:{
       MovementComponent,
       moveContainer,
       Title,
       RecomendItem
    },
    data(){
        return{
            isShow: true,
            width: 200,
            radius: 10,
            progress: 70,
            duration: 1000,
            delay: 20,
            barColor: '#Fddf05',
            backgroundColor: '#fff',
            timeFunction: 'cubic-bezier(0.99, 0.01, 0.22, 0.94)',
            title:"推荐活动",
            text1:"总运动",
            text2:"2279",
            text3:"分钟",
            text4:"打卡41天",
            text5:"本周运动(分钟)",
            text6:"85",
            text7:"本周好友运动排名",
            text8:"16"
        }
    },
    mounted(){
        /*页面挂载获取保存的cookie值，渲染到页面上*/
        let uname = localStorage.getItem('username')
        /*如果cookie不存在，则跳转到登录页*/
        if(uname == ""){
            this.$router.push('/login')
        }
    },
    methods: {
        reset() {
            this.isShow = false
            this.$nextTick(() => {
                this.isShow = true
            })
        }   
    } 
}
</script>
<style lang="less" scoped>
.recommend{
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20px;
} 
</style>